/*
用户个人中心路由组件
 */

import React from "react";
import { Result, List, WhiteSpace, Button, Modal } from "antd-mobile";
import { connect } from "react-redux";
import { Descriptions } from "antd";
import Cookies from "js-cookie";
import { resetUser } from "../../redux/actions";

const Item = List.Item;

class Personal extends React.Component {
  logout = () => {
    Modal.alert("退出", "确定退出登陆吗?", [
      { text: "取消" },
      {
        text: "确定",
        onPress: () => {
          Cookies.remove("userid");
          this.props.resetUser();
        },
      },
    ]);
  };
  gotoInfo = () => {
    const { type } = this.props.user;
    if (type === "laoban") this.props.history.replace("/laobaninfo");
    else this.props.history.replace("/dasheninfo");
  };

  render() {
    const { username, info, header, company, post, salary } = this.props.user;
    return (
      <div style={{ marginBottom: 50, marginTop: 50 }}>
        <Result
          img={
            <img
              src={require(`../../assets/images/${header}.png`)}
              style={{ width: 50 }}
              alt="header"
              onClick={this.gotoInfo}
            />
          }
          title={username}
          message={company}
        />

        <List renderHeader={() => "相关信息"}>
          <Item multipleLine>
            <Descriptions>
              <Descriptions.Item label="职位">{post}</Descriptions.Item>
              {salary ? (
                <Descriptions.Item label="薪资">{salary}</Descriptions.Item>
              ) : null}
              <Descriptions.Item label="简介">{info}</Descriptions.Item>
            </Descriptions>
          </Item>
        </List>
        <WhiteSpace />
        <List>
          <Button type="warning" onClick={this.logout}>
            退出登录
          </Button>
        </List>
      </div>
    );
  }
}

export default connect((state) => ({ user: state.user }), { resetUser })(
  Personal
);
